<template>

	<div class="user-box">
		<el-row class="p-all-20 box-flex m-b-10">
			<el-col :span="4">
				<el-input placeholder="请输入手机号 昵称 或 用户角色" v-model="keyWord" clearable size="mini"></el-input>
			</el-col>
			<el-col  class="m-l-10">
				<el-button type="primary" @click="searchAdmin(1)" size="mini">筛选</el-button>
				<el-button type="primary" @click="searchAdmin(2)" size="mini">重置</el-button>
				<el-button type="success" @click="setNewAdmin" size="mini">新建用户</el-button>
				<el-button type="danger" @click="allDelete" size="mini">批量删除</el-button>
			</el-col>
			<!-- <el-row class="p-all-20 box-flex  m-b-10">
				<el-col >
					<el-button type="success" @click="setNewAdmin" size="mini">新建用户</el-button>
					<el-button type="danger" @click="allDelete" size="mini">批量删除</el-button>
				</el-col>
			</el-row> -->
			<template>
				<!--<el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in list"
      :key="item.brandId"
      :label="item.brand"
      :value="item.brandId">
    </el-option>
  </el-select>-->
			</template>
		</el-row>
		<template>
			<el-table :data="adminList" @selection-change="handleSelectionChange" style="overflow: auto;margin-top: 10px;width:100%">
				<el-table-column type="selection"  align="center">
				</el-table-column>
				<el-table-column label="手机号" align="center">
					<template slot-scope="scope">{{ scope.row.cellPhoneNumber}}</template>
				</el-table-column>
				<el-table-column prop="nickname" label="昵称" align="center"></el-table-column>
				<el-table-column prop="roleName" label="角色" align="center"></el-table-column>
				<el-table-column prop="gmtCreate" label="创建时间" align="center"></el-table-column>
				<el-table-column label="操作"   align="center">
					<template slot-scope="scope">
						<el-button @click="toAdminEditer(scope.$index,scope.row)" size='mini' type="primary">修改</el-button>
						<el-button @click="toDeleteAdmin(scope.row)" size='mini' type="danger" >删除</el-button>
					</template>
				</el-table-column>
			</el-table>

			<el-dialog  :visible.sync="centerDialogVisible" width="30%" center :title="title">
				<el-row class="p-all-20 ">
					<el-col :span="20" class="box-flex m-b-10">
						<span class="sp-w-50 m-r-10">手机号</span>
						<el-input placeholder="请输入手机号" v-model="userNumber" class="w-input" maxLength="11" type="number" oninput="if(value.length>11)value=value.slice(0,11)" />
					</el-col>
					<el-col :span="20" class="box-flex m-b-10">
						<span class="sp-w-50 m-r-10">昵称</span>
						<el-input placeholder="请输入昵称" v-model="userName" class="w-input" maxLength="20" />
					</el-col>
					<el-col :span="20" class="box-flex m-b-10">
						<span class="sp-w-50 m-r-10">角色</span>
						<el-select v-model="roleValue" placeholder="请选择" class="w-input">
							<el-option v-for="item in roleOptions"  :value="item.roleName"  :label="item.roleName">
							</el-option>
						</el-select>
					</el-col>
				</el-row>
				<span slot="footer" class="dialog-footer">
                    <el-button @click="centerDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveAdmin">确 定</el-button>
                </span>
			</el-dialog>
		</template>
		<current-page :current-page="page" :page-size="pageSize" :page-total="totalPage" @handleCurrentChange="handleTabChange">
		</current-page>
	</div>
</template>

<script>
	import currentPage from '@/components/current-page/current-page.vue'
	import {
		SUCCESS_REQUEST_STATUS
	} from '@/utils/config.js'
	export default {
		
		data() {
			return {
				title:'新建用户',
				roleOptions: [], // 角色数据
				roleValue: '',
				userNumber: '',
				userName: '',
				userPassword: 'qxb123',
				joinDate: '',
				userId: '',
				keyWord: '',
				value: '',
				adminList: [],
				totalPage : 0, // 总页数
				offset: 0,
				page:0,
				pageSize: 10,
				centerDialogVisible: false,
				multipleSelection: [],
				list: [{
						"brandId": 62,
						"brand": "起亚",
						"firstLetter": "Q"
					},
					{
						"brandId": 13,
						"brand": "标致",
						"firstLetter": "B"
					},
				]
			}
		},
		created() {
			console.log(this.ruleMap)
			this._initAdminList()
			this._initRoleList()
		},
		methods: {
			_initAdminList() {
				this.$get({
					url: `auth/account/?offset=${this.offset}&size=${this.pageSize}`,
					data: {
						query: this.keyWord
					},
					callback: res => {
						console.log(res)
						if(res.status === 200) {
							this.adminList = []
							this.totalPage = res.data.total
							this.adminList = res.data.list
							this.page = (this.totalPage-1) / 10 + 1
							
						}
					}
				})
			},
			_initRoleList() {
				this.$get({
					url: `auth/role/?offset=0&size=10`,
					callback: res => {
						console.log(res)
						if(res.status === 200) {
							this.roleOptions = res.data.list
						}
					}
				})
			},
			searchAdmin(num) {
				if(num == 2) {
					this.keyWord = ''
				}
				this._initAdminList()
				// this.$emit('searchAdmin', num, this.keyWord)
			},
			allDelete() {
				console.log(this.multipleSelection)
				if(!this.multipleSelection.length) {
					this.$message({
						message: '请选择需要删除的用户',
						type: 'warning'
					});
					return
				}
				let map = this.multipleSelection.map((item) => {
					return item.id
				})
				console.log(map)
				console.log(typeof map)
				this.$confirm("确定批量删除选中用户?", "删除用户", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(() => {
					this.$delete({
						url: 'auth/account/',
						special: true,
						data: map,
						callback: res => {
							console.log(res)
							if(res.status === 200) {
								this.$message({
									message: '批量删除成功',
									type: 'success'
								});
								this._initAdminList()
							}
						}
					})
				}).catch(err => {})
			},
			handleSelectionChange(val) {
				this.multipleSelection = val
			},
			/**
			 * @desc 修改用户
			 */
			toAdminEditer(index, item) {
				this.title = '修改用户'
				this.centerDialogVisible = true
				this.setNewAdmin()
				this.userName = item.nickname
				this.userNumber = item.cellPhoneNumber
				this.userId = item.id
				this.roleValue = item.roleName

			},
			saveAdmin() {
				let msg = !this.userNumber ? '请填写手机号' : this.userNumber.length < 11 ? '请填写11位手机号' : !this.userName ? '请填写昵称' : !this.userPassword ? '请填写密码' : !this
					.roleValue ? '请选择角色' : ''
				if(msg) {
					this.$message({
						message: msg,
						type: 'warning'
					});
					return
				}
				let rol = ''
				let roleId = ''
				this.roleOptions.filter((item)  => {
					if(item.roleName == this.roleValue) {
						roleId = item.id
					}
				})
				
				this.userId ? this.editAdmin(roleId): this.saveUserAdmin(roleId)
				
				
			},
			editAdmin(roleId) {
				this.$put({
					url: 'auth/account/',
					data: {
						id: this.userId,
						nickname: this.userName,
						roleId: roleId,
						roleName: this.roleValue, 
						cellPhoneNumber: 	this.userNumber,
					},
					callback: res => {
						if(res.status === 200) {
							this.$message({
								message: '修改成功',
								type: 'success'
							});
							this._initAdminList()
							this.centerDialogVisible = false
							
						}else{
							this.$message({
								message: res.data.message,
								type: 'error'
							});
						}
					}
				})
			},
			saveUserAdmin(roleId) {
				this.$post({
					url: 'auth/account/',
					data: {
						id: '',
						nickname: this.userName,
						roleId: roleId,
						roleName: this.roleValue, 
						cellPhoneNumber: 	this.userNumber,
					},
					callback: res => {
						console.log(res)
						if(res.status === 200) {
							this.$message({
								message: '添加成功',
								type: 'success'
							});
							this._initAdminList()
							this.centerDialogVisible = false
							
						}else{
							this.$message({
								message: res.data.message,
								type: 'error'
							});
						}
					}
				})
			},
			// 删除管理员
			toDeleteAdmin(item) {
				console.log(item)
				this.$confirm("确定删除此用户?", "删除用户", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(() => {
					this.$delete({
						url: `auth/account/${item.id}`,
						callback: res => {
							if(res.status === SUCCESS_REQUEST_STATUS) {
								this.$message({
									message: '删除成功',
									type: 'success'
								});
								this.centerDialogVisible = false
								this._initAdminList()
							}
						}
					})
					return
					this.$ajax({
						api: 'admin/delete',
						params: {
							id: item.id
						}
					}).then(res => {
						if(res.status === SUCCESS_REQUEST_STATUS) {
							this.$message({
								message: '删除成功',
								type: 'success'
							});
							this.centerDialogVisible = false
							this._initAdminList()
						}
					}).catch((err) => {
						console.log(err)
						this.$message({
							message: err.message,
							type: 'warning'
						});
					})
				}).catch(err => {})
			},
			setNewAdmin() {
				this.userName = ''
				this.userNumber = ''
				this.userId = ''
				this.centerDialogVisible = true
			},
			handleTabChange(page) {
				console.log(page)
				this.offset = ((page+1)-1) * this.pageSize
				this._initAdminList()

			}
		},
		components: {
			currentPage
		}

	}
</script>

<style>
	.user-box {
		width: 100%;
		display: flex;
		flex-direction: column;
		max-width: 100%;
	}
	
	.box-flex {
		display: flex;
	}
	
	.w-input {
		width: 250px;
	}
	
	.sp-w-50 {
		width: 100px;
		line-height: 40px;
	}
</style>